<template>
    <div class="stars">
        <span
        class="star-item"
        v-for="(item,index) in CCommentStars"
        :key="index"
        :class="item"
        ></span>
    </div>
</template>

<script>
export default {
  props: ['stars'],
  name: 'Star',
  computed: {
    CCommentStars () {
      const res = []
      const score = Math.floor(this.stars * 2) / 2
      const integer = Math.floor(score)
      const hasdecimals = score % 1 !== 0
      for (let i = 0; i < integer; i++) {
        res.push('star-on')
      }
      if (hasdecimals) {
        res.push('star-half')
      }
      while (res.length < 5) {
        res.push('star-off')
      }
      return res
    }
  }
}
</script>

<style lang='stylus' scoped>
.stars{
    width 1.23rem
    display flex
    justify-content space-between
    .star-item{
        display inline-block
        width 0.19rem
        height 0.19rem
        background-size cover
        background-repeat no-repeat
    }
    .star-on{
        background-image url('../../../assets/imgs/star24_on@2x.png')
    }
    .star-off{
        background-image url('../../../assets/imgs/star24_off@2x.png')
    }
    .star-half{
        background-image url('../../../assets/imgs/star24_half@2x.png')
    }
}
</style>
